import React, { memo, useCallback, useEffect, useState } from 'react'
import { FriendListWrapper } from '@/components/b_friend_list/style'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { withRouter } from 'react-router-dom'
import {
  getFriendListAction,
  getMineFollowListAction,
  getFollowMineListAction
} from '@/store/blog/actionCreators'
import {
  SwapRightOutlined,
  MessageOutlined,
  DeleteOutlined
} from '@ant-design/icons'
import { Popconfirm } from 'antd'
import { removeFollow } from '@/network/blog/friend.request'
import setMessage from '@/utils/setMessage'

function B_FriendList(props) {
  const { localId, userId } = props
  const [followState, setFollowState] = useState(0) // 0.我关注的  1.关注我的
  const dispatch = useDispatch()

  useEffect(() => {
    userId && dispatch(getFriendListAction(userId))
    userId && dispatch(getMineFollowListAction(userId))
    userId && dispatch(getFollowMineListAction(userId))
  }, [userId, dispatch])

  const {
    friendList = [],
    mineFollow = [],
    followMine = []
  } = useSelector(
    (state) => ({
      friendList: state.blogReducer.getIn(['friendList']),
      mineFollow: state.blogReducer.getIn(['mineFollow']),
      followMine: state.blogReducer.getIn(['followMine'])
    }),
    shallowEqual
  )

  const toChat = (userId) => {
    setMessage('聊天室维修中..', 'info')
  }

  // 取消关注
  const confirm = useCallback(
    async (friendId) => {
      const result = await removeFollow(friendId)
      if (result.affectedRows) {
        userId && dispatch(getMineFollowListAction(userId))
        // 取消关注成功
        setMessage('已取消关注', 'info')
      }
    },
    [dispatch, userId]
  )

  // 关闭
  const cancel = useCallback(() => {
    setMessage('已取消操作', 'info')
  }, [])

  return (
    <FriendListWrapper>
      <h2 className="text-center text-bolder base-color fs-8">后宫</h2>

      <div className="follow">
        <h3 className="text-bolder py-6 fs-5 text-bolder">站内</h3>
        <ul className="px-4 follow-menu">
          <li
            className={followState === 0 ? 'active' : null}
            onClick={(e) => setFollowState(0)}
          >
            <span>我的关注 ({mineFollow && mineFollow.length})</span>
          </li>
          <li
            className={followState === 1 ? 'active' : null}
            onClick={(e) => setFollowState(1)}
          >
            <span>关注我的 ({followMine && followMine.length})</span>
          </li>
        </ul>
        <ul className="follow-list">
          {followState === 0 &&
            mineFollow.length > 0 &&
            mineFollow.map((item) => {
              return (
                <li
                  key={item.id}
                  className="animate__animated animate__jackInTheBox"
                >
                  <div className="d-flex">
                    <div className="left">
                      <img
                        className="avatar"
                        src={
                          item.avatar ||
                          'https://upload-images.jianshu.io/upload_images/20040970-c7e0d9ab8afc68f8.jpg'
                        }
                        alt=""
                      />
                    </div>
                    <div className="right">
                      <a
                        className="nickname space-1"
                        href={`/blog/home/u/${item.id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        title={item.nickname}
                      >
                        {item.nickname}
                      </a>
                      <p className="creed space-1" title={item.creed}>
                        {item.creed || '啥都没留下..'}
                      </p>
                      <a
                        className="pt-5 icon"
                        href={`/blog/home/u/${item.id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <SwapRightOutlined title="他/她的主页" />
                      </a>
                    </div>
                    <div className="chat" onClick={(e) => toChat(item.id)}>
                      <MessageOutlined title="聊天室" className="fs-6 icon" />
                    </div>
                    {localId === Number(userId) && (
                      <div className="remove">
                        <Popconfirm
                          title={`确定取消关注用户 (${item.nickname})?`}
                          onConfirm={(e) => confirm(item.id)}
                          onCancel={cancel}
                          okText="确认"
                          cancelText="取消"
                        >
                          <DeleteOutlined
                            title="取消关注"
                            className="fs-5 icon"
                          />
                        </Popconfirm>
                      </div>
                    )}
                  </div>
                </li>
              )
            })}
          {followState === 1 &&
            followMine.length > 0 &&
            followMine.map((item) => {
              return (
                <li
                  key={item.id}
                  className="animate__animated animate__jackInTheBox"
                >
                  <div className="d-flex">
                    <div className="left">
                      <img
                        className="avatar"
                        src={
                          item.avatar ||
                          'https://upload-images.jianshu.io/upload_images/20040970-c7e0d9ab8afc68f8.jpg'
                        }
                        alt=""
                      />
                    </div>
                    <div className="right">
                      <a
                        className="nickname space-1"
                        href={`/blog/home/u/${item.id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        title={item.nickname}
                      >
                        {item.nickname}
                      </a>
                      <p className="creed space-1" title={item.creed}>
                        {item.creed || '啥都没留下..'}
                      </p>
                      <a
                        className="pt-5 icon"
                        href={`/blog/home/u/${item.id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <SwapRightOutlined title="他/她的主页" />
                      </a>
                    </div>
                    <div className="chat" onClick={(e) => toChat(item.id)}>
                      <MessageOutlined title="聊天室" className="fs-6 icon" />
                    </div>
                  </div>
                </li>
              )
            })}
        </ul>
      </div>

      <div className="friend">
        <h3 className="text-bolder py-6 fs-5 text-bolder">站外</h3>
        <ul className="px-4 list">
          {friendList.length > 0 &&
            friendList.map((item) => {
              return (
                <li
                  key={item.key}
                  className="animate__animated animate__jackInTheBox"
                >
                  <a
                    href={item.link || '/'}
                    className="d-flex flex-start"
                    title={item.link}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <div className="left">
                      <img
                        className="avatar"
                        src={item.avatar}
                        alt=""
                        title={item.name}
                      />
                    </div>
                    <div className="right ml-3">
                      <p className="space-1 text-bolder fs-3">{item.name}</p>
                      <p className="space-1">{item.friendDesc}</p>
                    </div>
                  </a>
                </li>
              )
            })}
        </ul>
      </div>
    </FriendListWrapper>
  )
}

export default memo(withRouter(B_FriendList))
